<template>
  <view class="privacy-settings">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-button" @click="handleBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="title">隐私设置</text>
    </view>
    
    <view class="content">
      <!-- 隐私政策 -->
      <view class="section">
        <view class="section-title">隐私政策</view>
        <view class="menu-list">
          <view class="menu-item" @click="handlePrivacyPolicy">
            <view class="menu-item-left">
              <uni-icons type="info" size="20" color="#2979ff" />
              <text class="menu-item-text">隐私政策与声明</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 个人信息保护 -->
      <view class="section">
        <view class="section-title">个人信息保护</view>
        <view class="menu-list">
          <view class="menu-item" @click="handleInfoDisplay">
            <view class="menu-item-left">
              <uni-icons type="eye" size="20" color="#2979ff" />
              <text class="menu-item-text">信息展示设置</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleSensitiveInfo">
            <view class="menu-item-left">
              <uni-icons type="locked" size="20" color="#2979ff" />
              <text class="menu-item-text">敏感信息管理</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 位置信息隐私 -->
      <view class="section">
        <view class="section-title">位置信息隐私</view>
        <view class="menu-list">
          <view class="menu-item" @click="handleLocationAuth">
            <view class="menu-item-left">
              <uni-icons type="location" size="20" color="#2979ff" />
              <text class="menu-item-text">位置授权管理</text>
            </view>
            <view class="menu-item-right">
              <text class="menu-item-desc">{{ locationAuth }}</text>
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleClearLocation">
            <view class="menu-item-left">
              <uni-icons type="trash" size="20" color="#2979ff" />
              <text class="menu-item-text">清除位置信息</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 数据访问权限 -->
      <view class="section">
        <view class="section-title">数据访问权限</view>
        <view class="menu-list">
          <view class="menu-item" @click="handleAuthRecord">
            <view class="menu-item-left">
              <uni-icons type="list" size="20" color="#2979ff" />
              <text class="menu-item-text">授权记录查看</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleDataUsage">
            <view class="menu-item-left">
              <uni-icons type="chart" size="20" color="#2979ff" />
              <text class="menu-item-text">数据使用记录</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

// 页面配置
defineOptions({
  navigationBarTitleText: '隐私设置'
})

// 位置授权状态
const locationAuth = ref('仅在使用时允许')

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 隐私政策
const handlePrivacyPolicy = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 信息展示设置
const handleInfoDisplay = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 敏感信息管理
const handleSensitiveInfo = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 位置授权管理
const handleLocationAuth = () => {
  uni.showActionSheet({
    itemList: ['始终允许', '仅在使用时允许', '询问', '永不允许'],
    success: (res) => {
      const options = ['始终允许', '仅在使用时允许', '询问', '永不允许']
      locationAuth.value = options[res.tapIndex]
    }
  })
}

// 清除位置信息
const handleClearLocation = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清除所有位置信息记录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '清除成功',
          icon: 'success'
        })
      }
    }
  })
}

// 授权记录查看
const handleAuthRecord = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 数据使用记录
const handleDataUsage = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}
</script>

<style lang="scss">
@import '@/uni_modules/uni-scss/variables.scss';

.privacy-settings {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    padding-top: 65rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 100;
    
    .back-button {
      position: absolute;
      left: 32rpx;
      bottom: 8rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      width: 100%;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #000;
      margin-bottom: 8rpx;
    }
  }
  
  .content {
    padding-top: 165rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: 20rpx;
    
    .section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 30rpx;
        color: #666;
        padding: 20rpx;
      }
      
      .menu-list {
        background-color: #fff;
        border-radius: 12rpx;
        
        .menu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30rpx 20rpx;
          border-bottom: 1rpx solid #f5f5f5;
          
          &:last-child {
            border-bottom: none;
          }
          
          .menu-item-left {
            display: flex;
            align-items: center;
            
            .menu-item-text {
              font-size: 30rpx;
              color: #333;
              margin-left: 20rpx;
            }
          }
          
          .menu-item-right {
            display: flex;
            align-items: center;
            
            .menu-item-desc {
              font-size: 26rpx;
              color: #999;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style> 